import {observer} from "mobx-react";
import React from "react";
import {Alert, Form, message, Modal} from "antd";
import Store from "./Store";
import FormInput from "../../../components/form/FormInput";
import {createMenu} from "../../../api/work/GenerateApi";

@observer
class UpdateMenuForm extends React.Component {
    constructor(props) {
        super(props);
        this.state={}
    }

    handleSubmit = () => {
        this.props.form.validateFields((err, formData) => {
            if (!err){
                formData['pid'] = Store.menuInfo.pid;
                formData['id'] = Store.menuInfo.id;
                console.log(Store.menuInfo.id,"id");
                createMenu(formData).then(response => {
                    if (response.data.code === 200){
                        Store.flashMenu();
                        message.success(response.data.msg);
                        //关闭弹窗
                        Store.updateMenuVisible = false;
                    }
                });
            }
        });
    };



    render() {
        console.log(Store.menuInfo)
        return (
            <Modal
                title="修改菜单"
                width={800}
                visible={true}
                onOk={this.handleSubmit}
                onCancel={() => {Store.updateMenuVisible = false;Store.menuInfo = {};}}
            >
                <Alert closable showIcon type={"info"} message={"小提示"}
                       style={{width: 500, margin: '0 auto 20px', color: '#31708f !important'}}
                       description={"填写以下表单修改菜单,排序字段规则是:越小越靠前"}
                />
                <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
                    <FormInput form={this.props.form} label={"标题"} field={"title"} allowClear={true} placeholder={"请输入标题"} initialValue={Store.menuInfo.title} rules={[{ required: true, message: '菜单标题不能为空' }]}/>
                    <FormInput form={this.props.form} label={"图标"} field={"icon"} allowClear={true} placeholder={"请输入图标"} initialValue={Store.menuInfo.icon}/>
                    <FormInput form={this.props.form} label={"排序"} field={"sort"} allowClear={true} placeholder={"请输入排序"} initialValue={Store.menuInfo.sort} rules={[{pattern: /^[0-9]*$/,message: '排序字段必须是数字'},{required: true, message: '排序字段不能不能为空'}]}/>
                </Form>
            </Modal>
        );
    }

}
export default Form.create()(UpdateMenuForm);
